<template>
  <view>
    <view style="display: flex;justify-content: flex-end;">
      <view class="searchType" :class="[typeSel === 1 ? 'search-sel' : 'search-nosel']" @click="handleSel(1)">
        区域
      </view>
      <view class="searchType" :class="[typeSel === 2 ? 'search-sel' : 'search-nosel']" @click="handleSel(2)">
        公司
      </view>
    </view>
    <!-- #ifdef APP-PLUS || H5 -->
    <view class="content echarts" @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts"
      id="echarts"></view>
    <!-- #endif -->
    <!-- #ifndef APP-PLUS || H5 -->
    <view>非 APP、H5 环境不支持</view>
    <!-- #endif -->
  </view>
</template>

<script>
  export default {
    props: {
      //地图级别
      level: {
        type: Number,
        default: 1
      },
      //区域IDs
      provinceIds: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        //查询类型
        typeSel: 1,
        //被点击柱体样式
        selectStyle: {
          value: 0,
          label: {
            show: true, //开启显示
            position: 'top', //在上方显示
            textStyle: { //数值样式
              color: '#FF7E00',
              fontSize: "28rpx",
            }
          },
          itemStyle: {
            color: '#FF7E00'
          }
        },
        //x轴数据
        xdata: [],
        //y轴数据
        ydata: [],
        //报表数据源
        option: {
          //x轴配置
          xAxis: {
            type: 'category',
            data: []
          },
          //y轴配置
          yAxis: {
            type: 'value',
            max: function(value) {
              return value.max + 100;
            }
          },
          //数据源配置
          series: [],
        },
        //滚动配置
        dataZoom: [{
            show: true,
            realtime: true,
            start: 0,
            end: 100
          },
          {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 100
          }
        ]
      }
    },
    watch:{
      immediate: true,
      provinceIds: function(newQuestion, oldQuestion) {
        this.loadDataByType()
      }
    },
    mounted() {
      this.loadDataByType()
    },
    methods: {
      //根据条件查询不同数据 区域/公司
      loadDataByType() {
        let _query = {
          level: this.level,
          dataType: this.typeSel
        }
        if (this.provinceIds) {
          _query.provinceIds = this.provinceIds
        }
        this.$u.api.statisticsArea(_query).then(res => {
          if (!res) {
            return
          }
          this.xdata = []
          this.ydata = []
          for (let i = 0; i < res.length; i++) {
            this.xdata.push(res[i].name)
            this.ydata.push(res[i].value)
          }
          let _ser = this.initData()
          this.option.series = []
          this.option.series.push(_ser)
          if (res.length > 10) {
            this.option.dataZoom = this.dataZoom
          }
        }).catch(err => {
          console.error(err)
        })
      },
      //初始化报表数据配置
      initData() {
        let _ser = {
          barCategoryGap: "88rpx",
          barWidth: 30,
          itemStyle: {
            color: "#0071C5"
          },
          data: [],
          type: 'bar'
        }
        this.option.xAxis.data = this.xdata
        var _obj = JSON.stringify(this.ydata)
        _ser.data = JSON.parse(_obj)
        return _ser
      },
      //点击按钮事件
      handleSel(selIndex) {
        if (this.typeSel != selIndex) {
          this.typeSel = selIndex
          this.loadDataByType()
        }
      },
      //报表柱体点击事件
      onViewClick(options) {
        //初始化基础数据
        let _ser = this.initData()
        //找到被点击柱体
        let _index = this.xdata.findIndex((item) => {
          return item == options.name
        })
        //改变被点击柱体的样式
        this.selectStyle.value = this.ydata[_index]
        _ser.data[_index] = this.selectStyle
        //改变报表数据
        this.option.series = []
        this.option.series.push(_ser)
      }
    }
  }
</script>

<script module="echarts" lang="renderjs">
  let myChart
  export default {
    data() {
      return {
        opntions: [],
      }
    },
    mounted() {
      if (typeof window.echarts === 'function') {
        this.initEcharts()
      } else {
        // 动态引入较大类库避免影响页面展示
        const script = document.createElement('script')
        // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
        script.src = 'static/common/js/echarts.min.js'
        this.opntions = this.option
        script.onload = this.initEcharts.bind(this)
        document.head.appendChild(script)
      }
    },
    methods: {
      initEcharts() {
        myChart = echarts.init(document.getElementById('echarts'))
        myChart.setOption(this.opntions)

        // echarts的点击事件
        myChart.on('click', async params => {
          // 把点击事件的数据缓存下来
          this.clickData = params;
          await this.$ownerInstance.callMethod('onViewClick', {
            value: this.clickData.data,
            name: this.clickData.name,
            seriesName: this.clickData.seriesName
          })
          //  // 上次点击数据置空
          this.clickData = null;
        })
      },
      updateEcharts(newValue, oldValue, ownerInstance, instance) {
        // 监听 service 层数据变更
        setTimeout(myChart.setOption(newValue), 500)
      },
      onClick(event, ownerInstance) {
        // 调用 service 层的方法
        // ownerInstance.callMethod('onViewClick', {
        // 	test: 'test'
        // })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .echarts {
    margin-top: 10rpx;
    width: 100%;
    height: 900rpx;
  }

  .searchType {
    width: 128rpx;
    height: 54rpx;
    border-radius: 66rpx;
    font-size: 30rpx;
    font-weight: 400;
    line-height: 54rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 40rpx;
    margin-top: 20rpx;
  }

  .search-nosel {
    background: #F5F7F9;
    color: #999999
  }

  .search-sel {
    background: #0071C5;
    color: #FFFFFF;
  }
</style>
